<template>
    <h1 style="color:#ccc">{{ msg }}</h1>
    <div>
        <input type="text" v-model="title" @keypress.enter="todoStore.addTodo(title)"> &nbsp;&nbsp;
        <button @click="todoStore.addTodo(title)">添加</button>
    </div> 
    <ul>
        <li v-for="(todo,index) in todoStore.todos" :key="index">
            <todoItem :todo="todo"/>
            <button @click="todoStore.removeTodo(todo.id)">remove</button>
        </li>
    </ul>
</template>

<script setup lang='ts'>
import {ref} from 'vue'
import todoItem from './todoItem.vue'
import { useTodoStore } from '../store/todo'
defineProps<{
    msg:string
}>()
const todoStore = useTodoStore() as any
let title = ref<string>('')

</script>

<style scoped>

</style>
